<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>北故团队</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" /><!--CSS RESET-->
	 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><!--演示页面样式，使用时可以不引用-->
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<style>

		.demo{ background-color: #E4E1D9; padding: 50px 0;}
		.box{
		    font-family: 'Kanit', sans-serif;
		    text-align: center;
		    border: 10px solid #fff;
		    box-shadow: 1px 1px 2px #e6e6e6;
		    overflow: hidden;
		    position: relative;
		}
		.box:hover{ box-shadow: 13px 13px 15px rgba(0, 0, 0, 0.3); }
		.box:before{
		    content: "";
		    background: linear-gradient(to left top,#11998e,#38ef7d);
		    height: 100%;
		    width: 100%;
		    opacity: 0;
		    position: absolute;
		    left: 0;
		    top: 0;
		    transition: all 0.4s linear;
		}
		.box:hover:before{ opacity: 1; }
		.box img{
		    width: 100%;
		    height: auto;
		    transition: all 0.4s linear;
		}
		.box:hover img{
		    opacity: 0;
		    transform: scale(3);
		}
		.box .box-content{
		    color: #fff;
		    width: 100%;
		    transform: translateY(-50%) scale(0);
		    position: absolute;
		    top: 50%;
		    left: 0;
		    transition: all 0.4s linear;
		}
		.box:hover .box-content{ transform: translateY(-50%) scale(1); }
		.box .title{
		    font-size: 25px;
		    font-weight: 600;
		    letter-spacing: 1px;
		    text-transform: uppercase;
		    margin: 0;
		}
		.box .post{
		    font-size: 16px;
		    text-transform: capitalize;
		}
		.box .icon{
		    padding: 0;
		    margin: 0;
		    list-style: none;
		    position: absolute;
		    right: 8px;
		    bottom: 10px;
		}
		.box .icon li{
		    display: inline-block;
		    margin: 0 1px;
		    opacity: 0;
		    transform: scale(1.3);
		    transition: all 0.3s ease 0.4s;
		}
		.box:hover .icon li{
		    opacity: 1;
		    transform: scale(1);
		}
		.box:hover .icon li:nth-child(2){ transition: all 0.3s ease 0.2s; }
		.box .icon li a{
		    color: #11998e;
		    background: #fff;
		    font-size: 16px;
		    line-height: 33px;
		    height: 33px;
		    width: 33px;
		    border-radius: 50%;
		    display: block;
		    transition: all 0.5s ease;
		}
		.box .icon li  a:hover{
		    color: #fff;
		    background-color: #11998e;
		    box-shadow: 0 0 5px #000;
		}
		@media only screen and (max-width:990px){
		    .box { margin: 0 0 30px; }
		}
	</style>
</head>
<body>
	<div class="htmleaf-container" style="height: 1000px;">
		<nav style=" float: right;">
			<ul id="main">
			  <li>主页</li>
			  <li>关于我们</li>
			  <li>项目分类
				<ul class="drop">
				  <div>
				  <li>scss</li>
				  <li>jquery</li>
				  <li>html</li>
				  </div>
				</ul>
			  </li>
			  <li>联系我们</li>
			  <div id="marker"></div>
			</ul>
		  </nav>
			<h1 style="margin: 0px; padding: 10px ; font-size: 45px; text-align: center; font-family: Microsoft YaHei;">北故团队</h1>
		  
		<div class="demo" >
	        <div class="container">

	            <div class="row">
	                <div class="col-md-4 col-sm-6">
	                    <div class="box">
	                        <img  src="https://q1.qlogo.cn/g?b=qq&nk=2492242914&s=640">
	                        <div class="box-content">
	                            <h3 class="title">北故团队老大</h3>
	                            <span class="post">联系QQ:2492242914</span>
								<br>
								<span class="post">CE</span>
								<br>
								<span class="post">易语言</span>
								<br>
								<span class="post">前端开发</span>
	                        </div>
	                        <ul class="icon">
	                            <li><a href="tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=2492242914&website=www.oicqzone.com"><i class="fa fa-link"></i></a></li>
	                        </ul>
	                    </div>
	                </div>
	                <div class="col-md-4 col-sm-6">
	                    <div class="box">
	                        <img  src="https://q1.qlogo.cn/g?b=qq&nk=1926002523&s=640">
	                        <div class="box-content">
	                            <h3 class="title">执笔画江山</h3>
	                            <span class="post">联系QQ:1926002523</span>
	                        </div>
	                        <ul class="icon">
	                            <li><a href="tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=1926002523&website=www.oicqzone.com"><i class="fa fa-link"></i></a></li>
	                        </ul>
	                    </div>
	                </div>
	                <div class="col-md-4 col-sm-6">
	                    <div class="box">
	                        <img  src="https://q1.qlogo.cn/g?b=qq&nk=3283397948&s=640">
	                        <div class="box-content">
	                            <h3 class="title">老李</h3>
	                            <span class="post">联系QQ:3283397948</span>
	                        </div>
	                        <ul class="icon">
	                            <li><a href="tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=3283397948&website=www.oicqzone.com"><i class="fa fa-link"></i></a></li>
	                        </ul>
	                    </div>
	                </div>
					<div class="col-md-4 col-sm-6">
	                    <div class="box">
	                        <img  src="https://q1.qlogo.cn/g?b=qq&nk=10001&s=640">
	                        <div class="box-content">
	                            <h3 class="title">联系qq:2492242914</h3>
	                            <span class="post">等待你的加入</span>
	                        </div>
	                        <ul class="icon">
	                            <li><a href="tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=2492242914&website=www.oicqzone.com"><i class="fa fa-link"></i></a></li>
	                        </ul>
	                    </div>
	                </div>
	            </div>
	        </div>
	    </div>

	</div>
	

</body>
</html>